import React from 'react';
import {Component} from 'react';
import zaijian from './images/zaijian.png'
import fugong from './images/fugong.png';
import jiance from './images/jiance.png';
import tong from './images/tong.png';

import './TopData.less';

export default class TopData extends Component {

  constructor(props) {
    super(props);
  }

  handleFgCountClick(shzt, tabKey) {
    const { onFgCountClick, onMapTabsChange } = this.props;
    if (onFgCountClick) {
      onFgCountClick(shzt);
    }
    if (onMapTabsChange && tabKey) {
      onMapTabsChange(tabKey);
    }
  }

  handleXzxmCountClick(shzt) {
    const { onXzxmCountClick } = this.props;
    if (onXzxmCountClick) {
      onXzxmCountClick(shzt);
    }
  }

  handleFgjcjgCountClick() {
    const { onFgjgCountClick } = this.props;
    if (onFgjgCountClick) {
      onFgjgCountClick('JCJG');
    }
  }

  handleFgsptCountClick() {
    const { onFgjgCountClick } = this.props;
    if (onFgjgCountClick) {
      onFgjgCountClick('SPT');
    }
  }

  render() {
    const {
      data: {
        fggcTotalCount,
        fggcXzCount,
        zjgcTotalCount,
        zjgcXzCount,
        fgJcCioCount,
        fgSptCioCount,
      }
    } = this.props;
    return (
      <div className="top-data">
        <div className="top-data-item">
          <div className="top-data-item-img-outer-wrap">
            <div className="top-data-item-img-inner-wrap color-zjxm">
              <img className="img" spellcheck="width:100%" src={zaijian}/>
            </div>
          </div>
          <div className="top-data-item-data-wrap">
            <div className="top-data-title">在建项目</div>
            <div className="top-data-count">
              <span className="top-data-number color-fgzj" onClick={() => this.handleFgCountClick(null, 'F')}>
                {zjgcTotalCount}
              </span>
              <span className="unit">个</span>
              <span className="xz-count" onClick={() => this.handleXzxmCountClick(null)}>{zjgcXzCount > 0 ? `+${zjgcXzCount}` : '----'}</span>
            </div>
          </div>
        </div>
        <div className="top-data-item">
          <div className="top-data-item-img-outer-wrap">
            <div className="top-data-item-img-inner-wrap color-fgxm">
              <img className="img" spellcheck="width:100%" src={fugong}/>
            </div>
          </div>
          <div className="top-data-item-data-wrap">
            <div className="top-data-title">复工项目</div>
            <div className="top-data-count">
              <span className="top-data-number color-fgxm" onClick={() => this.handleFgCountClick('办理完毕', 'E')}>
                {fggcTotalCount}
              </span>
              <span className="unit">个</span>
              <span className="xz-count" onClick={() => this.handleXzxmCountClick('办理完毕')}>{fggcXzCount > 0 ? `+${fggcXzCount}` : '----'}</span>
            </div>
          </div>
        </div>
        <div className="top-data-item top-data-clickable" onClick={() => this.handleFgjcjgCountClick()}>
          <div className="top-data-item-img-outer-wrap">
            <div className="top-data-item-img-inner-wrap color-fgjc">
              <img className="img" spellcheck="width:100%" src={jiance}/>
            </div>
          </div>
          <div className="top-data-item-data-wrap">
            <div className="top-data-title">复工检测机构</div>
            <div className="top-data-count">
              <span className="top-data-number color-fgjc">
                {fgJcCioCount}
              </span>
              <span className="unit">家</span>
            </div>
          </div>
        </div>
        <div className="top-data-item top-data-clickable" onClick={() => this.handleFgsptCountClick()}>
          <div className="top-data-item-img-outer-wrap">
            <div className="top-data-item-img-inner-wrap color-fgspg">
              <img className="img" spellcheck="width:100%" src={tong}/>
            </div>
          </div>
          <div className="top-data-item-data-wrap">
            <div className="top-data-title">复工商品砼</div>
            <div className="top-data-count">
              <span className="top-data-number color-fgspt">
                {fgSptCioCount}
              </span>
              <span className="unit">家</span>
            </div>
          </div>
        </div>
      </div>

    );
  }
}
